<template>
  <!-- 角色管理 -->
  <div class="RoleManagement">
    <div class="RoleManagement-tittle">
      <div class="crumbs">
        <p><span>系统设置 /</span> <span> 角色管理</span></p>
        <h3>角色管理</h3>
      </div>
      <div class="search">
        <div class="search-left">
          <span>角色名称</span>
          <el-input v-model="input" placeholder="请输入" />
        </div>
        <div class="search-right">
          <el-button type="primary" @click="searchFn">查询</el-button>
          <el-button type="primary" plain @click="resetFn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="ResidentLabels-content">
      <div class="content-title">
        <span>角色列表</span>
        <div class="title-btn">
          <el-button type="primary" @click="addFn">+ 新建</el-button
          >
          <el-button type="primary" plain @click="bulkDel">批量操作</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="80" align="center" />
        <el-table-column prop="roleName" label="角色名称" align="center" />
        <el-table-column prop="roleDesc" label="角色描述" align="center" />
        <el-table-column
          prop="personnelNumber"
          label="角色人数"
          align="center"
        />
        <el-table-column prop="addPerson" label="添加人" align="center" />
        <el-table-column prop="addTime" label="添加时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="pages">
        <Page
          :count="count"
          :total="total"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup >
import axios from "../../utils/http";
import { ref, reactive, onMounted } from "vue";
import Page from "../../components/Page.vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const input = ref("");
const tableData = ref([]);
const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});
let page = ref(1);
const count = ref(5);
let total = ref(20);

let getdata = () => {
  axios({
    url: "/roleManagement/list",
    method: "get",
    params: {
      page: page.value,
      limit: count.value,
      roleName: input.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      tableData.value = data.data;
      total.value = data.total;
    }
  });
};
let handleCurrentChange = (val) => {
  console.log(val);
  page.value = val;
  getdata();
};
let handleSizeChange = (val) => {
  console.log(val);
  count.value = val;
  getdata();
};
onMounted(() => {
  getdata();
});

// 查询
const searchFn = () => {
  console.log("查询");
  getdata();
};

// 重置
const resetFn = () => {
  console.log("重置");
  input.value = "";
  getdata();
};
// 新增
const addFn = () => {
  router.push({
    path:"/home/add",
    name:"addRole"
  });
};
// 批量删除
// const multipleSelection = ref<number[]>([]);
const multipleSelection = ref([]);
// 多选框变得方法
const selectionChange = (val) => {
  multipleSelection.value = [];
  val.forEach((v) => {
    multipleSelection.value.push(v.id);
  });
  console.log(multipleSelection.value);
  // console.log(typeof multipleSelection.value)
};

let bulkDel = () => {
  axios({
    url: "/roleManagement/delete",
    method: "DELETE",
    data: multipleSelection.value,
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

// 删除
let del = (e) => {
  axios({
    url: "/roleManagement/delete",
    method: "DELETE",
    data: [e]
  }).then(({data}) => {
    console.log(data)
    if(data.code==0){
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    }
   
  });
};

</script>

<style lang="less" scoped>
.RoleManagement {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .RoleManagement-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
    .search {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        span {
          font-size: 16px;
        }
        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }
  .ResidentLabels-content {
    padding: 15px 20px;
    // border: 1px solid red;
    margin-top: 20px;
    background-color: white;
    .content-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pages {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
    }
    img {
      width: 50px;
      height: 50px;
    }
  }
  .el-dialog {
    .tanchu-body {
      display: flex;
      input {
        flex: 1;
      }
    }
  }
}
</style>
